<template>
	<view>
		<view style="width: 100%;line-height: 100rpx;text-align: center;background-color: #fff;">订单</view>
		<!-- 顶部标签栏 -->
		<view class="dingbu">
			<text @click="index_zhong=index" :class="index_zhong==index?'item item_zhong':'item'"
				v-for="(item,index) in ['待接单','待结算','已完成','已取消']">{{item}}</text>
		</view>
		<!-- 订单列表 -->
		<view style="padding: 20rpx">
			<view v-show="item.state==index_zhong" class="list_item" v-for="item in list">
				<view @click="toorderDetails(item.state)" style="display: flex;justify-content: space-between;">
					<text v-if="item.state!=3">罗瑶<text style="font-size: 30rpx;color: #b2b2b2;margin-left: 10rpx;">新新家园67号</text></text>
					<text v-if="item.state!=0">{{item.time}}</text>
					<text
						style="color: #f29d60;">{{item.state==0?'待接单':item.state==1?'待结算':item.state==2?'已完成':'已取消'}}</text>
				</view>
				<view @click="toorderDetails(item.state)" style="display: flex;justify-content: flex-start;margin-top: 20rpx;">
					<image style="width: 150rpx;height: 150rpx;" :src="item.img" mode="aspectFill"></image>
					<view style="font-size: 20rpx;color: #a3a5a8;margin-left: 20rpx;">
						<text style="font-size: 30rpx;color: #000000;line-height: 50rpx;">回收类型：{{item.type}}</text><br/>
						<text>重量：{{item.weight}}kg</text><br/>
						<text>预计收入金额：￥{{item.income}}</text><br/>
						<text>取货方式：{{item.method}} {{item.date}}</text>
					</view>
				</view>
				<view style="width: 100%;margin-top: 40rpx;display: flex;justify-content: space-between;font-size: 30rpx;align-items: center;">
					<view><uni-icons type="phone" size="14"></uni-icons> 联系顾客</view>
					<button @click="stateupdate(item.state)" style="color: #f29d60;border: #f29d60 2rpx solid;border-radius: 60rpx;background-color: #ffffff;margin: 0;" size="mini">{{item.state==0?'接单':item.state==1?'立即结算':item.state==2?'查看详情':'查看详情'}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index_zhong: 0,
				list: [{
					time: '1分钟',
					state: 0,
					type: '短裙',
					weight: 3,
					income: 600,
					method: "上门取货",
					img: '../../static/image/4.jpg',
					date: '10:00-12:00'
				}, {
					time: '',
					state: 1,
					type: '',
					weight: 3,
					income: 600,
					method: "上门取货",
					img: '../../static/image/4.jpg',
					date: '10:00-12:00'
				}, {
					time: '',
					state: 2,
					type: '',
					weight: 3,
					income: 600,
					method: "上门取货",
					img: '../../static/image/4.jpg',
					date: '10:00-12:00'
				}, {
					time: '',
					state: 3,
					type: '',
					weight: 3,
					income: 600,
					method: "上门取货",
					img: '../../static/image/4.jpg',
					date: '10:00-12:00'
				}]
			}
		},
		methods: {
			toorderDetails(e){
				console.log(e);
				uni.navigateTo({
					url:'./order/orderDetails?state='+e
				})
			},
			stateupdate(e){
				switch(e){
					case 0:
						uni.$u.toast('接单操作')
						break;
					case 1:
						uni.navigateTo({
							url:"./order/recyclingList"
						})
						break;
					case 2:
						uni.navigateTo({
							url:"./order/orderDetails"
						})
						break;
					case 3:
						uni.navigateTo({
							url:"./order/orderDetails"
						})
						break;
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #f2f2f2;
	}
	.dingbu {
		display: flex;
		justify-content: space-around;
		width: 100%;
		font-size: 35rpx;
		padding-top: 30rpx;
		background-color: #ffffff;
	}

	.item {
		padding-bottom: 20rpx;
		font-weight: bold;
	}

	.item_zhong {
		border-bottom: #f29d60 5rpx solid;
		color: #f29d60;
	}

	.list_item {
		padding: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}
</style>
